<template>

  <div class="pages-directorys">
    <!-- 当用户从左侧菜单点击进入目录管理的时候布局： -->
    <el-card v-if="ispages">
      <div class="aaa">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item style="color: #000" :to="{ path: '/' }"
            >学科管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>大数据</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row style="margin-top: 20px">
        <!-- 导航 -->
        <el-form :inline="true" >
          <el-col :span="19">
            <!-- 目录名称 -->
            <el-form-item label="目录名称">
              <el-input
                placeholder="请输入内容"
                v-model="form.directoryName"
              ></el-input>
            </el-form-item>
            <!-- 状态 -->
           <el-form-item label="状态">
              <el-select v-model="form.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
              <el-button style="margin-left: 10px" @click="removeInput"
                >清除</el-button
              >
              <el-button type="primary" @click="getdlirectorys">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-link type="primary" :underline="false" @click="$router.back()"
              >&larr;&nbsp;返回学科</el-link
            >&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button
              type="success"
              icon="el-icon-edit"
              class="addbtn"
              @click="addDialog=true"
              size="small"
              >新增目录</el-button
            >
          </el-col>
        </el-form>
      </el-row>
      <!-- 警示条 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 用户列表区 -->
      <el-table :data="dlirectoryslist" border stripe>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column
          label="目录名称"
          prop="directoryName"
        ></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            {{ parseTime(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column label="面试数量" prop="totals"></el-table-column>
       <el-table-column label="状态" prop="state">
          <template slot-scope="scope">
            {{ scope.row.state === 0 ? "已禁用" : "已启用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-col>
                <el-link
                  :underline="false"
                  type="primary"
                  @click="stateChange(scope.row)"
                >
                  {{ scope.row.state === 0 ? "启用" : "禁用" }} </el-link
                >&nbsp; &nbsp;
                <el-link
                  :underline="false"
                  @click="updatedlirectorys(scope.row)"
                  :type="scope.row.state === 0 ? 'primary' : 'info'"
                  :disabled="scope.row.state === 0 ? false : true"
                >
                  修改 </el-link
                >&nbsp; &nbsp;
                <el-link
                  :underline="false"
                  @click="removedlirectorysByid(scope.row)"
                  :type="scope.row.state === 0 ? 'primary' : 'info'"
                  :disabled="scope.row.state === 0 ? false : true"
                >
                  删除
                </el-link>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 当用户从学科管理页面点击 “学科分类” 按钮来到目录管理的时候布局： -->
    <el-card v-else>
      <el-row>
        <!-- 导航 -->
        <el-form :inline="true" :model="form">
          <el-col :span="21">
            <!-- 目录名称 -->
            <el-form-item label="目录名称">
              <el-input
                placeholder="请输入内容"
                v-model="form.directoryName"
              ></el-input>
            </el-form-item>
            <!-- 状态 -->
            <el-form-item label="状态">
              <el-select v-model="form.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
              <el-button style="margin-left: 10px" @click="removeInput"
                >清除</el-button
              >
              <el-button type="primary" @click="getdlirectorys">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button
              type="success"
              icon="el-icon-edit"
              class="addbtn"
              @click="addDialog = true"
              size="small"
              >新增目录</el-button
            >
          </el-col>
        </el-form>
      </el-row>
      <!-- 警示条 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 用户列表区 -->
      <el-table :data="dlirectoryslist" border stripe>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column
          label="目录名称"
          prop="directoryName"
        ></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            {{ parseTime(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column label="面试数量" prop="totals"></el-table-column>
        <el-table-column label="状态" prop="state">
          <template slot-scope="scope">
            {{ scope.row.state === 0 ? "已禁用" : "已启用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-col>
                <el-link
                  :underline="false"
                  type="primary"
                  @click="stateChange(scope.row)"
                >
                  {{ scope.row.state === 0 ? "启用" : "禁用" }} </el-link
                >&nbsp; &nbsp;
                <el-link
                  :underline="false"
                  @click="updatedlirectorys(scope.row)"
                  :type="scope.row.state === 0 ? 'primary' : 'info'"
                  :disabled="scope.row.state === 0 ? false : true"
                >
                  修改 </el-link
                >&nbsp; &nbsp;
                <el-link
                  :underline="false"
                  @click="removedlirectorysByid(scope.row)"
                  :type="scope.row.state === 0 ? 'primary' : 'info'"
                  :disabled="scope.row.state === 0 ? false : true"
                >
                  删除
                </el-link>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="form.page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="form.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card> 
    <!-- 添加表单 -->
    <el-dialog
      title="新增目录"
      :visible.sync="addDialog"
      width="27%"
      @close="addClose"
    >
      <el-form label-width="100px" >
        <el-form-item label="所属学科"  v-if="!this.$route.query.id">
          <el-select v-model="addForm.subjectID" placeholder="请选择">
            <el-option
              v-for="item in dlirectoryslist"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      <el-form-item label="目录名称">
          <el-input
            v-model="addForm.directoryName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="adddlirectorys">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改表单 -->
    <el-dialog title="修改目录" :visible.sync="updateDialog" @close="addClose" width="27%">
      <el-form  label-width="100px" :model="editForm">
        <el-form-item label="所属学科">
           <el-select v-model="editForm.subjectID" >
            <el-option
              v-for="item in dlirectoryslist"
              :key="item.id"
              :label="item.directoryName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称">
          <el-input autocomplete="off" v-model="editForm.directoryName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialog = false">取 消</el-button>
        <el-button type="primary" @click="newupdated"
          >确 定</el-button
        >
      </div>
    </el-dialog>

  </div>
</template>
<script>
// 获取数据api
import { list, update, add, remove, changeState } from "@/api/hmmm/directorys";
// 时间挫
import { parseTime } from "@/utils/index";
export default {
  data() {
    return {
      // 表单
      form: {
        page: 1,
        // 状态
        state: null,
        pagesize: 10,
        directoryName: "",
      },
      // 获取用户列表的参数
      total: 0,
      //列表 显示隐藏
      ispages: false,
      // 新增Dialog框
      addDialog: false,
      // 修改Dialog框
      updateDialog: false,
      // 获取所有数据
      dlirectoryslist: [],
      // 下拉数据 已选中的id
      addForm: {
        subjectID: this.$route.query.id || null,
        directoryName: '',
      },
      editForm: {
        subjectID:'',
        directoryName: '',
        id: ''
      },
    };
  },
  created() {
    if(this.$route.query.id){
      this.addForm.subjectID = Number(this.$route.query.id)
      this.ispages = true
    }
    this.getdlirectorys();
  },
  mounted() {},
  methods: {
    // 调用时间
    parseTime,
    // 获取数据函数
    async getdlirectorys() {
      // 调用接口获取
      const { data } = await list(this.form);
      // 提醒成功
      this.$message.success("获取商品列表成功！");
      // 赋值
      this.dlirectoryslist = data.items;
      // 总页数赋值
      this.total = data.counts;
      // console.log(this.dlirectoryslist);
    },
    // 监听对话框关闭事件
    addClose() {     
      this.addForm.subjectID=""
      this.addForm.directoryName= ""
     
    },  
    // 新增目录
   async adddlirectorys() {
      // const addform ={
      //   subjectID:this.addForm.subjectID,
      //   directoryName:this.addForm.directoryName
      // }
        // 可以发起添加用户的网络请求
       await add(this.addForm); 
        console.log(this.addForm);
        this.$message.success("添加用户成功！");
        // 重新获取用户列表数据
        this.getdlirectorys();
        // 隐藏添加用户的对话框
        this.addDialog = false;
        
    },
    // 修改目录
   updatedlirectorys(scope) {
    //  console.log(scope);
      // this.editForm.subjectName = scope.subjectName
      this.editForm.directoryName = scope.directoryName
      this.editForm.subjectID = scope.subjectID
      this.editForm.id = scope.id
      this.updateDialog =true    
      
    },
    // 更新修改目录
   async newupdated(){    
    await update(this.editForm)
    //  console.log(this.editForm);
        // 关闭对话框
        this.updateDialog = false;
        // 刷新数据列表
        this.getdlirectorys();
        // 提示修改成功
        this.$message.success("修改用户信息成功");
    },
    // 删除目录
    async removedlirectorysByid(id) {
      // console.log(id);
      // 询问用户是否删除
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      await remove(id);
      if (this.total % this.form.pagesize === 1) {
        this.form.page--;
      }
      this.$message.success("删除用户成功");
      this.getdlirectorys();
    },
    // 状态值
  async  stateChange(id) {
      const data = {
        id:id.id,
        state:id.state
      }
      if (data.state === 1) {
        data.state = 0;
      } else {
        data.state = 1;
      }
      // 把最新的状态传过去
     await changeState(data);
     this.getdlirectorys()
    },
    // 清空输入框
    removeInput() {
      this.form.directoryName = "";
      this.form.state = null;
    },
    // 总页数
    handleSizeChange(newSize) {
      this.form.pagesize = newSize;
      this.getdlirectorys();
    },
    // 页码值
    handleCurrentChange(newPage) {
      // console.log(newPage);

      this.form.page = newPage;
      this.getdlirectorys();
    },
  },
};
</script>

<style scoped lang="less">
.pages-directorys {
  /deep/.el-breadcrumb__inner.is-link {
    color: #606266;
  }
  .el-alert {
    margin-bottom: 20px;
  }
  .el-pagination {
    text-align: right;
    margin-top: 10px;
  }
  // 面包屑边框
  .aaa {
    padding: 0 20px 18px 20px;
    border-bottom: 1px solid #ebeef5;
  }
}
</style>

